
import React, { useState, useRef } from 'react';
import { roleList, roleAdd, roleUpdate, roleDelete } from  '@/services/ant-design-pro/role';
import { Switch, message } from 'antd';
import ListView from '@/components/Base/ListView'
import Helper from '@/components/Base/helper'

const SysDetp: React.FC = () => {
  const columns = [
    Helper.Table('id', 'id').val,
    Helper.Table('角色名称', 'roleName').val,
    Helper.Table('权限字符', 'roleCode').val,
    Helper.Table('角色顺序', 'order').val,
    Helper.Table('状态', 'status').Render(((text,record,index,action) => {
      return  <Switch defaultChecked={record.status} onChange={async (checked) => {
        await roleUpdate(record.id, {
          status: checked
        })
        message.success('编辑成功');
        action.reload()
      }} />
    })).val,
    Helper.Table('备注', 'remark').val,
  ];

  const formColumns = [
    Helper.Form('角色名称', 'roleName')
      .FIP({
        rules: Helper.Rule().Require('不得为空').val,
      }).Width('md').val,
    Helper.Form('权限字符', 'roleCode')
      .FIP({
        rules: Helper.Rule().Require('不得为空').val,
      }).Width('md').val,
    Helper.Form('角色顺序', 'order')
      .Digit().Width('md').val,
    Helper.Form('状态', 'status').Radio({'0': '正常', 1: '停用'}).Width('md').val,
    Helper.Form('备注', 'remark')
      .Textarea().Width('md').val,
  ]

  const values = {
    headerTitle: '角色列表',
    ACTIONS: [
      {
        type: 'NEW',
        submit: (id: any, body:any) => id ? roleUpdate(id, body) :roleAdd(body),
        beforeSubmit: (values: any) => ({...values, parentId: values.parentId && values.parentId[0]})
      },
      {type: 'EDIT'},
      {type: 'DELETE', submit:(record: {id: number}) => roleDelete(record.id)}
    ],
    columns,
    request: roleList,
    formColumns,
  }

  return (
    <ListView {...values} />
  );
};

export default SysDetp;

